<template>
  <div>
    <ul>
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
/**
 * 配置项	类型	默认值	描述
downloadName	String	screenshot	截图下载文件名
regionColor	String	#409eff	选区轮廓颜色
maskColor	String	rgba(0,0,0,0.5)	遮罩层颜色
globalColorOptions	Array	[
"#ff3a3a","#f8b60f",
"#0083ff","#40ff00",
"#363636","#e9e9e9"
]	配置所有绘制项可供选择的颜色（当绘制项有单独的颜色配置时，该配置无效）
regionSizeIndicator	Object	{...}	左上角区域大小指示器样式（见下文）
rectangleOptions	Object	{
color:globalColorOptions,
size: [4, 6, 8]
}	配置矩形绘制项可供选择的颜色和线宽
circleOptions	Object	{
color:globalColorOptions,
size: [4, 6, 8]
}	配置圆形绘制项可供选择的颜色和线宽
paintOptions	Object	{
color:globalColorOptions,
size: [4, 6, 8]
}	配置自由画笔绘制项可供选择的颜色和线宽
mosaicOptions	Object	{
size: [6, 8, 10]
}	配置马赛克绘制项可供选择的线宽
textOptions	Object	{
color:globalColorOptions,
size: [16, 18, 20]
}	配置文字绘制项可供选择的颜色和字体尺寸
arrowOptions	Object	{
color:globalColorOptions,
size: [4, 6, 8]
}	配置箭头绘制项可供选择的颜色和线宽
initialRegion	Object	-	初始化时自动选取所配置的区域
customDrawing	Array
<customDrawingObject>	-	自定义绘制（见下文）

regionSizeIndicator
Options	Type	Default	Description
show	Boolean	true	尺寸指示器是否显示
color	String	#ffffff	尺寸指示器颜色
fontSize	Number	14	尺寸指示器尺寸

initialRegion
Options	Type	Default	Description
left	Number	-	初始化选区的横向起始位置
top	Number	-	初始化选区的纵向起始位置
width	Number	-	初始化选区的宽度
height	Number	-	初始化选区的高度

customDrawingObject
配置项	类型	描述
className	String	自定义绘制项的类名
optionsHtml	String	定义自定义绘制项二级菜单的html内容
onOptionsCreated	Function	当自定义绘制项的二级菜单创建完成该函数将被调用，可在参数中获取到二级菜单dom对象
onDrawingOpen	Function	当自定义绘制项被激活时该函数将被调用，可在参数中获取到canvas dom对象、二级菜单dom对象、保存历史记录函数，注意：请在每次自定义绘制结束后调用保存历史记录函数，以确保插件的撤销功能正常
onDrawingClose	Function	当自定义绘制项被关闭时该函数将被调用，可在参数中获取到canvas dom对象、二级菜单dom对象


Event
事件名称	描述
screenshotGenerated	截图生成完成时触发，可在回调中获取图片base64编码
screenshotDownload	截图被下载时触发，可在回调中获取图片base64编码
regionDragging	选区尺寸或位置改变时触发，可在回调中获取选区的详细位置信息
regionDragStart	选区尺寸或位置改变前触发，可在回调中获取选区的详细位置信息
regionDragEnd	选区尺寸或位置改变后触发，可在回调中获取选区的详细位置信息
successCreated	插件初始化成功时触发
errorCreated	插件初始化失败时触发，可在回调中接受错误信息
closed	插件被关闭时触发
 */
import RegionScreenshot from "region-screenshot-js";
let screenshot = new RegionScreenshot();
screenshot.on("screenshotGenerated", (dataUrl) => {
  // 得到一个base64
  console.log(dataUrl);
});
</script>
<style lang="less" scoped>
li {
  list-style-type: none;
  padding: 20px;
  background-color: #ccc;
  font-size: 20px;
}
</style>
